<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>民宿数据分析</title>
    <script src="./rests/cardstyle.3"></script>
    <link rel="stylesheet" href="../../style/all.min.css" />
    <script src="../../utils/chart.min.js"></script>
    <style>
      body {
        font-family: "Noto Sans SC", sans-serif;
        background-color: #f5f7fa;
      }
      .sidebar {
        transition: all 0.3s ease;
      }
      .card-hover {
        transition: all 0.3s ease;
      }
      .card-hover:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
      }
      .chart-container {
        height: 300px;
        position: relative;
      }
      .heatmap-day {
        /* width: 30px; */
        height: 30px;
        display: flex;
        align-items: center; /* 垂直居中 */
        justify-content: center; /* 水平居中（flex 方式） */
        text-align: center; /* 额外确保文字水平居中 */
        border-radius: 4px;
        font-size: 12px;
      }
      .loading-overlay {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(255, 255, 255, 0.9);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        z-index: 10;
      }
      .loading-spinner {
        width: 40px;
        height: 40px;
        border: 4px solid #f3f3f3;
        border-top: 4px solid #3498db;
        border-radius: 50%;
        animation: spin 1s linear infinite;
        margin-bottom: 10px;
      }
      .loading-text {
        color: #666;
        font-size: 14px;
        margin: 0;
      }
      @keyframes spin {
        0% {
          transform: rotate(0deg);
        }
        100% {
          transform: rotate(360deg);
        }
      }
    </style>
  </head>
  <body>
    <div id="app" class="flex h-screen overflow-hidden">
      <!-- 主内容区 -->
      <div class="flex-1 flex flex-col overflow-hidden">
        <!-- 顶部状态栏 -->
        <header class="bg-white shadow-sm z-10">
          <div class="flex items-center justify-between px-6 py-3">
            <div class="flex items-center">
              <button class="md:hidden mr-4 text-gray-600">
                <i class="fas fa-bars"></i>
              </button>
              <h2 class="text-lg font-semibold text-gray-800">数据概览</h2>
            </div>
            <!-- <div class="flex items-center space-x-4">
              <div class="relative">
                <select
                  v-model="selectedOption"
                  @change="changeOption"
                  class="appearance-none bg-gray-100 border-0 rounded-md px-4 py-2 pr-8 text-sm focus:outline-none"
                >
                  <option
                    v-for="item in options"
                    :key="item.value"
                    :value="item.value"
                    :selected="item.selected"
                  >
                    {{ item.text }}
                  </option>
                </select>
                <div
                  class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700"
                >
                  <i class="fas fa-chevron-down text-xs"></i>
                </div>
              </div>
            </div> -->
          </div>
        </header>

        <!-- 主内容 -->
        <main class="flex-1 overflow-y-auto p-6 bg-gray-50">
          <!-- 关键指标卡片 -->
          <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6">
            <div class="bg-white rounded-lg shadow-sm p-6 card-hover">
              <div class="flex items-center justify-between">
                <div>
                  <p class="text-sm text-gray-500">总预订量</p>
                  <p class="text-2xl font-bold text-blue-600">
                    {{top.zongDingDanLiang}}
                  </p>
                </div>
                <div
                  class="w-12 h-12 rounded-full bg-blue-100 flex items-center justify-center text-blue-500"
                >
                  <i class="fas fa-calendar-check"></i>
                </div>
              </div>
              <div class="mt-4">
                <p class="text-sm text-gray-500 flex items-center">
                  <span
                    class="mr-1"
                    :style="{ color: top.shangYueBiJiaoDingDanLiang < 0 ? 'red' : 'green' }"
                    ><i
                      v-if="top.shangYueBiJiaoDingDanLiang > 0"
                      class="fas fa-arrow-up"
                    ></i>
                    <i v-else class="fas fa-arrow-down" style="color: red"></i>
                    {{top.shangYueBiJiaoDingDanLiang}}%</span
                  >
                  较上月
                </p>
              </div>
            </div>
            <div class="bg-white rounded-lg shadow-sm p-6 card-hover">
              <div class="flex items-center justify-between">
                <div>
                  <p class="text-sm text-gray-500">入住率</p>
                  <p class="text-2xl font-bold text-blue-600">
                    {{top.ruZhuLv}}%
                  </p>
                </div>
                <div
                  class="w-12 h-12 rounded-full bg-green-100 flex items-center justify-center text-green-500"
                >
                  <i class="fas fa-bed"></i>
                </div>
              </div>
              <div class="mt-4">
                <p class="text-sm text-gray-500 flex items-center">
                  <span
                    class="mr-1"
                    :style="{ color: top.shangYueBiJiaoRuZhuLv < 0 ? 'red' : 'green' }"
                  >
                    <i
                      v-if="top.shangYueBiJiaoRuZhuLv > 0"
                      class="fas fa-arrow-up"
                    ></i>
                    <i v-else class="fas fa-arrow-down" style="color: red"></i>
                    {{ top.shangYueBiJiaoRuZhuLv }}%
                  </span>
                  较上月
                </p>
              </div>
            </div>
            <div class="bg-white rounded-lg shadow-sm p-6 card-hover">
              <div class="flex items-center justify-between">
                <div>
                  <p class="text-sm text-gray-500">预估收入</p>
                  <p class="text-2xl font-bold text-blue-600">
                    ¥{{top.zongShouRu}}
                  </p>
                </div>
                <div
                  class="w-12 h-12 rounded-full bg-purple-100 flex items-center justify-center text-purple-500"
                >
                  <i class="fas fa-yen-sign"></i>
                </div>
              </div>
              <div class="mt-4">
                <p class="text-sm text-gray-500 flex items-center">
                  <span
                    class="mr-1"
                    :style="{ color: top.shangYueBiJiaoZongShouRu < 0 ? 'red' : 'green' }"
                  >
                    <i
                      v-if="top.shangYueBiJiaoZongShouRu > 0"
                      class="fas fa-arrow-up"
                    ></i>
                    <i v-else class="fal fa-arrow-down" style="color: red"></i>
                    {{ top.shangYueBiJiaoZongShouRu }}元
                  </span>
                  较上月
                </p>
              </div>
            </div>
          </div>

          <!-- 预订量统计图表 -->
          <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
            <div class="bg-white rounded-lg shadow-sm p-6 card-hover">
              <div class="flex items-center justify-between mb-4">
                <h3 class="font-semibold text-gray-800">市场动态</h3>
                <div class="flex space-x-2">
                  <button
                    v-for="item in chartTypes"
                    :key="item.type"
                    class="px-3 py-1 text-xs rounded-md"
                    :class="bazaarChartType === item.type ? 'bg-blue-100 text-blue-600' : 'bg-gray-100'"
                    @click="changebazaarChartType(item.type)"
                  >
                    {{ item.label }}
                  </button>
                </div>
              </div>
              <div class="chart-container">
                <div v-if="marketLoading" class="loading-overlay">
                  <div class="loading-spinner"></div>
                  <p class="loading-text">数据加载中...</p>
                </div>
                <canvas id="bookingChart" v-show="!marketLoading"></canvas>
              </div>
            </div>
            <!-- 入住率趋势图 -->
            <div class="bg-white rounded-lg shadow-sm p-6 card-hover">
              <div class="flex items-center justify-between mb-4">
                <h3 class="font-semibold text-gray-800">预定趋势</h3>
                <div class="flex space-x-2">
                  <button
                    v-for="item in chartTypes"
                    :key="item.type"
                    class="px-3 py-1 text-xs rounded-md"
                    :class="occupancyChartType === item.type ? 'bg-blue-100 text-blue-600' : 'bg-gray-100'"
                    @click="changeOccupancyChartType(item.type)"
                  >
                    {{ item.label }}
                  </button>
                </div>
              </div>
              <div v-if="occupancyLoading" class="loading-overlay">
                <div class="loading-spinner"></div>
                <p class="loading-text">数据加载中...</p>
              </div>
              <div class="chart-container">
                <canvas id="occupancyChart" v-show="!occupancyLoading"></canvas>
              </div>
            </div>
          </div>
          <!-- 客户偏好分析 -->
          <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
            <div class="bg-white rounded-lg shadow-sm p-6 card-hover">
              <h3 class="font-semibold text-gray-800 mb-4">房型偏好</h3>
              <div class="chart-container">
                <canvas id="roomTypeChart"></canvas>
              </div>
            </div>
            <div class="bg-white rounded-lg shadow-sm p-6 card-hover">
              <h3 class="font-semibold text-gray-800 mb-4">入住时长分布</h3>
              <div class="chart-container">
                <canvas id="stayDurationChart"></canvas>
              </div>
            </div>
          </div>

          <!-- 热门入住日期热力图 -->
          <div class="bg-white rounded-lg shadow-sm p-6 card-hover">
            <h3 class="font-semibold text-gray-800 mb-4">热门入住日期</h3>
            <div class="overflow-x-auto">
              <div class="inline-block min-w-full">
                <!-- 上方星期容器 -->
                <div class="grid grid-cols-7 gap-1 mb-2">
                  <div class="text-center text-xs text-gray-500">日</div>
                  <div class="text-center text-xs text-gray-500">一</div>
                  <div class="text-center text-xs text-gray-500">二</div>
                  <div class="text-center text-xs text-gray-500">三</div>
                  <div class="text-center text-xs text-gray-500">四</div>
                  <div class="text-center text-xs text-gray-500">五</div>
                  <div class="text-center text-xs text-gray-500">六</div>
                </div>

                <!-- 下方日期容器（与上方 grid 配置一致） -->
                <div class="grid grid-cols-7 gap-1" id="heatmapApp">
                  <div
                    v-for="(item, index) in days"
                    :key="index"
                    class="heatmap-day"
                    :class="item.isEmpty ? 'bg-transparent' : [getDayStyle(item.dailyBooking).bg, getDayStyle(item.dailyBooking).text]"
                    :style="{ fontWeight: item.isEmpty ? 'normal' : (getDayStyle(item.dailyBooking).bold ? 'font-medium' : 'normal') }"
                  >
                    {{ item.isEmpty ? '' : item.day }}
                  </div>
                </div>
              </div>
            </div>
            <div class="mt-4 flex justify-end">
              <div class="flex items-center">
                <span class="text-xs text-gray-500 mr-2">入住量</span>
                <div class="w-4 h-4 bg-gray-100 mr-1"></div>
                <div class="w-4 h-4 bg-blue-100 mr-1"></div>
                <div class="w-4 h-4 bg-blue-200 mr-1"></div>
                <div class="w-4 h-4 bg-blue-300 mr-1"></div>
                <div class="w-4 h-4 bg-blue-400"></div>
              </div>
            </div>
          </div>
        </main>
      </div>
    </div>
    <script src="../../utils/utils.js"></script>
    <script src="../../config/config.js"></script>
    <script src="../../utils/mixins.js"></script>
    <script src="../../yl/vue.js"></script>
    <script src="../../yl/index.js"></script>
    <script src="../../yl/zh-cn.mjs"></script>
    <script src="../../yl/index.iife.min.js"></script>
    <script src="../../yl/jquery.min.js"></script>
    <script src="../../utils/jquery.cookie.js"></script>
    <script src="../../api/request.js"></script>
    <script src="./js/Analysis_of_homestay_data.js"></script>
  </body>
</html>
